<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layout}">

<head>
	<meta charset="UTF-8">
	<title>我的节点</title>
	<style>
		.w-250px {
		    width: 250px;
		}
	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<div class="toolbar">
			<div style="margin-right: 12px; width: 220px;">
				<el-input placeholder="请输入节点"></el-input>
			</div>
			<div style="flex: 1 1 0%;">
				<el-button-group>
					<el-button @click="changeStatus(null)" :type="listStatus == null ?'primary':''"
						icon="Document">全部</el-button>
					<el-button @click="changeStatus(0)" :type="listStatus == 0 ?'primary':''"
						icon="CircleCheck">可用</el-button>
					<el-button @click="changeStatus(1)" :type="listStatus == 1 ?'primary':''"
						icon="CircleClose">不可用</el-button>
				</el-button-group>
			</div>
			<el-button type="success" @click="openRegisterForm" icon="DocumentAdd">注册节点</el-button>
			<el-button type="primary" @click="openForm" icon="DocumentAdd">绑定节点</el-button>
		</div>
		<div v-loading="listLoading">
			<el-empty description="暂无节点" v-if="list == null || list.length == 0"></el-empty>
			<el-table :data="list" v-if="list !== null && list.length > 0" border style="width: 100%;margin-top: 12px;">
			<el-table-column prop="nodeId" label="ID" width="150"></el-table-column>
				<el-table-column prop="nodeTitle" label="标题" width="150"></el-table-column>
				<el-table-column prop="nodeCode" label="节点编号" width="200">
					<template #default="scope">
						<el-link :underline="false" type="primary" @click="openDetail(scope.row)">{{scope.row.nodeCode}}</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="nodeMaster" label="主节点" width="200"></el-table-column>
				<el-table-column prop="nodePlatform" label="平台类型" width="100"></el-table-column>
				<el-table-column prop="modeStr" label="部署模式" width="100"></el-table-column>
				<el-table-column prop="groupStr" label="集群方式" width="100"></el-table-column>
				<el-table-column prop="nodeProtocol" label="协议" width="100"></el-table-column>
				<el-table-column prop="nodeGateway" label="网关通讯"></el-table-column>
				<el-table-column prop="nodeEnable" label="状态" width="100">
					<template #default="scope">
						<el-tag size="small" type="success" v-if="scope.row.nodeEnable == 0">可用</el-tag>
						<el-tag size="small" type="danger" v-if="scope.row.nodeEnable == 1">不可用</el-tag>
						<el-link :underline="false">
							<el-icon :size="20" color="green" @click="restatus(scope.row.nodeId)">
								<Refresh></Refresh>
							</el-icon>
						</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="nodeCreate" label="创建时间" width="150"></el-table-column>
				<el-table-column prop="nodeCreate" label="操作" width="150">
					<template #default="scope">
						<el-button type="text" size="small" @click="openForm(scope.row)" :disabled="true" >编辑</el-button>
						<el-button type="text" size="small" @click="delNode(scope.row.nodeId)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 详情 -->
		<el-drawer v-model="nodeDrawer" title="节点详情" direction="rtl" >
			<el-descriptions
			    :column="1"
			    border
			    direction="horizontal"
			    :style="blockMargin"
			    label-class-name="descriptions-label"
			  >
			    <el-descriptions-item label="别名备注">{{nodeView?.nodeTitle}}</el-descriptions-item>
			    <el-descriptions-item label="本节点ID编号">{{nodeView?.nodeCode}}</el-descriptions-item>
			    <el-descriptions-item label="主节点ID编号" >{{nodeView?.nodeMaster}}</el-descriptions-item>
				<el-descriptions-item label="状态">
					<el-tag size="small" type="success" v-if="nodeView.nodeEnable == 0">可用</el-tag>
					<el-tag size="small" type="danger" v-if="nodeView.nodeEnable == 1">不可用</el-tag>
				</el-descriptions-item>
			    <el-descriptions-item label="平台类型">{{nodeView?.nodePlatform}}</el-descriptions-item>
			    <el-descriptions-item label="部署模式">{{nodeView?.modeStr}}</el-descriptions-item>
			    <el-descriptions-item label="集群方式">{{nodeView?.groupStr}}</el-descriptions-item>
			    
			    <el-descriptions-item label="网关通讯">{{nodeView?.nodeGateway}}</el-descriptions-item>
			    <el-descriptions-item label="grpc">{{nodeView?.nodeGrpc}}</el-descriptions-item>
				<el-descriptions-item label="http">{{nodeView?.nodeHttp}}</el-descriptions-item>
				<el-descriptions-item label="net">{{nodeView?.nodeNet}}</el-descriptions-item>
			    
			    <el-descriptions-item label="协议类型">{{nodeView?.nodeProtocol}}</el-descriptions-item>
			    <el-descriptions-item label="token"><el-text truncated class="w-250px">{{nodeView?.nodeToken}}</el-text></el-descriptions-item>
			    <el-descriptions-item label="CA证书"><el-text truncated class="w-250px">{{nodeView?.nodeCa}}</el-text></el-descriptions-item>
			    <el-descriptions-item label="cert证书"><el-text truncated class="w-250px">{{nodeView?.nodeCert}}</el-text></el-descriptions-item>
			    <el-descriptions-item label="key公钥"><el-text truncated class="w-250px">{{nodeView?.nodeKey}}</el-text></el-descriptions-item>
			    
			  </el-descriptions>
		</el-drawer>
		<!--弹框-->
		<el-dialog title="节点设置" v-model="nodeForm.visible" width="60%">
			<el-form :model="nodeForm" :rules="nodeFormRules" ref="nodeForm" label-width="100px">
				<el-row :gutter="10">
					<el-col :span="6">
						<h4>基础信息</h4>
						<el-form-item label="集群方式" prop="group">
							<el-select v-model="nodeForm.group" placeholder="集群方式">
								<el-option label="中心化" value="0"></el-option>
								<el-option label="p2p" value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="平台类型" prop="platform">
							<el-select v-model="nodeForm.platform" placeholder="节点类型">
								<el-option label="Edge" value="edge" :disabled="nodeForm.group == 1"></el-option>
								<el-option label="Center" value="center" :disabled="nodeForm.group == 1"></el-option>
								<!--<el-option label="Test" value="test"></el-option>-->
								<el-option label="Autonomy" value="autonomy" :disabled="nodeForm.group == 0"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="部署模式" prop="mode">
							<el-select v-model="nodeForm.mode" placeholder="部署模式">
								<el-option label="MPC" value="0" :disabled="nodeForm.group == 0"></el-option>
								<el-option label="TEE" value="1" :disabled="nodeForm.group == 1"></el-option>
								<el-option label="ALL-IN-ONE" value="2" :disabled="nodeForm.group == 1"></el-option>
							</el-select>
						</el-form-item>
						<!--v-show="nodeForm.group == 0 && nodeForm.platform == 'edge'"--> 
						<el-form-item label="主节点ID" prop="master"  :required="requiredMaster">
							<el-input v-model="nodeForm.master" :disabled="requiredMaster == false" ></el-input>
							<span  class="font11">中心化 x 中心化、中心化 x 点对点组网模式 Lite 节点必填；普通中心化模式，点对点模式不需要填写</span>
						</el-form-item>
						<el-form-item label="本节点ID" prop="code">
							<el-input v-model="nodeForm.code"></el-input>
						</el-form-item>
						<el-form-item label="别名备注" prop="title">
							<el-input v-model="nodeForm.title"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<h4>通讯地址</h4>
						<el-form-item label="网关" prop="gateway">
							<el-input v-model="nodeForm.gateway" placeholder="http(s)://ip:-p"></el-input>
							<span>install.sh -p</span>
						</el-form-item>
						<el-form-item label="grpc" prop="grpc">
							<el-input v-model="nodeForm.grpc" placeholder="ip:-g"></el-input>
							  <span>install.sh -g</span>
						</el-form-item>
						<el-form-item label="http(s)" prop="http">
							<el-input v-model="nodeForm.http" placeholder="http(s)://ip:-k"></el-input>
							<span>install.sh -k</span>
						</el-form-item>
						<el-form-item label="节点通讯" prop="net">
							<el-input v-model="nodeForm.net" placeholder="http(s)://ip:-q"></el-input>
							  <span>install.sh -q</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<h4>协议</h4>
						<el-form-item label="协议类型" prop="protocol">
							<el-select v-model="nodeForm.protocol" placeholder="协议类型" @change="protocolChange">
								<el-option label="notls" value="notls"></el-option>
								<el-option label="tls" value="tls"></el-option>
								<el-option label="mtls" value="mtls"></el-option>
							</el-select>
						</el-form-item>
						<!--<el-form-item label="token" prop="token" :required="requiredToken" v-show="nodeForm.protocol !== 'notls'">
							<el-input v-model="nodeForm.token" placeholder="token" :disabled="requiredToken == false"></el-input>
							<span class="font11">文件在：/home/kuscia/var/certs/token</span>
						</el-form-item>-->
						<el-form-item label="Token" prop="token" v-show="nodeForm.protocol !== 'notls'" :required="requiredToken">
							<el-col :span="24">
							<el-upload
							    ref="tokenFileUploadRef"
							    :action="uploadUrl"
								:data="uploadForm"
							    :auto-upload="false"
							     v-model="nodeForm.token"
							    :on-success = "function(response, file, fileList){return uploadSuccess(response, file, fileList, 'token')}"
							    :disabled="nodeForm.protocol == 'notls'?true:false"
							  >
							    <template #trigger>
							      <el-button :color="nodeForm.protocol == 'notls'?'':'#626aef'" plain>选择文件</el-button>
							    </template>
								<el-button class="ml-3" v-show="nodeForm.protocol == 'notls'?false:true" @click="uploadFile('tokenFileUploadRef', 'token', 'token')" icon="UploadFilled"></el-button>
							  </el-upload>
							  <span class="font11">docker cp ${IMAGE_NAME}:/home/kuscia/var/certs/token /root/</span>
							  </el-col>
						</el-form-item>
						<el-form-item label="CA证书" prop="caFile" v-show="nodeForm.protocol !== 'notls'" :required="requiredToken">
							<el-col :span="24">
							<el-upload
							    ref="caFileUploadRef"
							    :action="uploadUrl"
								:data="uploadForm"
							    :auto-upload="false"
							     v-model="nodeForm.caFile"
							    :on-success = "function(response, file, fileList){return uploadSuccess(response, file, fileList, 'caFile')}"
							    :disabled="nodeForm.protocol == 'notls'?true:false"
							  >
							    <template #trigger>
							      <el-button :color="nodeForm.protocol == 'notls'?'':'#626aef'" plain>选择证书</el-button>
							    </template>
								<el-button class="ml-3" v-show="nodeForm.protocol == 'notls'?false:true" @click="uploadFile('caFileUploadRef', 'caFile', 'ca.crt')" icon="UploadFilled"></el-button>
							  </el-upload>
							  <span class="font11">docker cp ${IMAGE_NAME}:/home/kuscia/var/certs/ca.crt /root/</span>
							  </el-col>
						</el-form-item>
						<el-form-item label="cert证书" prop="certFile" v-show="nodeForm.protocol !== 'notls'" :required="requiredToken">
							<el-col :span="24">
							<el-upload
							    ref="certFileUploadRef"
							    :action="uploadUrl"
								:data="uploadForm"
							    :auto-upload="false"
							     v-model="nodeForm.certFile"
							    :on-success = "function(response, file, fileList){return uploadSuccess(response, file, fileList, 'certFile')}"
							    :disabled="nodeForm.protocol == 'notls'?true:false"
							  >
							    <template #trigger>
							      <el-button :color="nodeForm.protocol == 'notls'?'':'#626aef'" plain>选择证书</el-button>
							    </template>
								<el-button class="ml-3" v-show="nodeForm.protocol == 'notls'?false:true" @click="uploadFile('certFileUploadRef', 'certFile', 'kusciaapi-server.crt')" icon="UploadFilled"></el-button>
							  </el-upload>
								<span class="font11">docker cp ${IMAGE_NAME}:/home/kuscia/var/certs/kusciaapi-server.crt /root/</span>
							  </el-col>
						</el-form-item>
						<el-form-item label="key公钥" prop="keyFile" v-show="nodeForm.protocol !== 'notls'" :required="requiredToken">
							<el-col :span="24">
							<el-upload
							    ref="keyFileUploadRef"
							    :action="uploadUrl"
								:data="uploadForm"
							    :auto-upload="false"
							     v-model="nodeForm.keyFile"
							    :on-success = "function(response, file, fileList){return uploadSuccess(response, file, fileList, 'keyFile')}"
							    :disabled="nodeForm.protocol == 'notls'?true:false"
							  >
							    <template #trigger>
							      <el-button :color="nodeForm.protocol == 'notls'?'':'#626aef'" plain>选择证书</el-button>
							    </template>
								<el-button class="ml-3" v-show="nodeForm.protocol == 'notls'?false:true" @click="uploadFile('keyFileUploadRef', 'keyFile', 'kusciaapi-server.key')" icon="UploadFilled"></el-button>
							  </el-upload>
								<span class="font11">docker cp ${IMAGE_NAME}:/home/kuscia/var/certs/kusciaapi-server.key /root/</span>
							  </el-col>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="closeForm">取 消</el-button>
				<!--<el-button type="success" @click="testNode">测试连接</el-button>-->
				<el-button type="primary" @click="saveForm">保 存</el-button>
			</template>
		</el-dialog>
		<!--弹框-->
		<el-dialog title="子节点信息配置" v-model="configForm.visible" width="60%">
			<el-form :model="configForm" :rules="configFormRules" ref="configForm" label-width="100px">
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item label="本节点ID" prop="code">
							<el-input v-model="configForm.code"></el-input>
							<span  class="font11">节点名称，平台页面的计算节点ID</span>
						</el-form-item>
						<el-form-item label="主节点" prop="master">
							<el-select ref="masterSelect" v-model="configForm.masterInfo" placeholder="主节点"  @change="configMasterChange" value-key="nodeId">
								<el-option
							      v-for="item in masterNodes"
							      :key="item.nodeId"
							      :label="item.nodeCode"
							      :value="item"
							    ></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="协议类型" prop="protocol">
							<el-select v-model="configForm.protocol" placeholder="协议类型" @change="configProtocolChange">
								<el-option label="notls" value="notls"></el-option>
								<el-option label="tls" value="tls"></el-option>
								<el-option label="mtls" value="mtls"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="主节点网关端口" prop="masterGateway">
							<el-input v-model="configForm.masterGateway"></el-input>
							<span  class="font11">根据主节点部署日志中得到主节点网关端口号，需实际填写</span>
						</el-form-item>
						<el-form-item label="gateway端口" prop="gateway">
							<el-input v-model="configForm.gateway"></el-input>
							<span  class="font11">-p 参数,参数传递的是 lite/autonomy 容器 kuscia-gateway 映射到主机的端口，保证和主机上现有的端口不冲突即可</span>
						</el-form-item>
						<el-form-item label="grpc端口" prop="grpc">
							<el-input v-model="configForm.grpc"></el-input>
							<span  class="font11">-g 参数,参数传递的是 lite/autonomy 容器 Kuscia-grpc 映射到主机的 HTTP/HTTPS 端口</span>
						</el-form-item>
						<el-form-item label="http端口" prop="http">
							<el-input v-model="configForm.http"></el-input>
							<span  class="font11">-k 参数,参数传递的是 lite/autonomy 容器 Kuscia-http 映射到主机的 HTTP/HTTPS 端口</span>
						</el-form-item>
						<el-form-item label="net端口" prop="net">
							<el-input v-model="configForm.net"></el-input>
							<span  class="font11">-q 参数参数传递的是 lite/autonomy 容器 kuccia-net 映射到主机的 env 端口，保证和主机上现有的端口不冲突即可</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div >
						    <el-steps direction="vertical">
						      <el-step title="填充信息" >
									<template #description >
									请按照规范填写左侧表单，填写完成之后不要马上注册，请检测第二步中的端口检测
									</template>
							  </el-step>
						      <el-step title="校验端口" >
									<template #description >
									<el-text tag="p">请在目标机器执行以下端口检测，如果端口被占用则需更换可用的端口</el-text>
									<pre><code>
										lsof -i:{{configForm.gateway}}
										lsof -i:{{configForm.http}}
										lsof -i:{{configForm.grpc}}
										lsof -i:{{configForm.net}}
									</code></pre>
									</template>
							  </el-step>
						      <el-step title="注册节点" >
								  	<template #description >
									<el-text tag="p">提交注册节点按钮，稍等好一会儿接口返回值自动补充好脚本的【token】值</el-text>
									</template>
							  </el-step>
							  <el-step title="安装脚本" >
								  <template #description >
									<el-text tag="p">请在secretflow安装目录执行以下脚本，添加子节点.</el-text>
									<pre><code>bash install.sh lite 
									-n {{configForm.code}}  
									-m '{{configForm.protocol=='notls'?'http':'https'}}://{{configForm.masterHostname?configForm.masterHostname:'root-kuscia-master'}}:{{configForm.masterGateway}}' 
									-t {{configForm.token}} 
									-p {{configForm.gateway}} 
									-k {{configForm.http}}  
									-g {{configForm.grpc}}  
									-q {{configForm.net}}  
									-P {{configForm.protocol}}
									</code></pre>
									</template>
							  </el-step>
								<el-step title="绑定节点" >
								  <template #description >
									<el-text tag="p">执行install.sh成功安装节点之后，需要返回本平台绑定该节点</el-text>
									</template>
								</el-step>
						    </el-steps>
						  </div>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="closeConfigForm">取 消</el-button>
				<el-button type="primary" @click="saveConfigForm">提交注册→</el-button>
			</template>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	function checkNodeCode(rule, value, callback) {
		if (value === '') {
	        callback(new Error('请输入节点编号ID'));
	      } else if (!/^[A-Za-z-]+$/.test(value)) {
	        callback(new Error('编号ID只能包含英文字母和连字符'));
	      } else {
	        callback();
		}
	}
	function checkPort(rule, value, callback) {
	  if (!value) {
	    return callback(new Error('请输入端口号'))
	  }
	  setTimeout(() => {
	    if (!Number.isInteger(value*1)) {
	      callback(new Error('请输入数字端口号'))
	    } else {
	      if (value*1 < 1024 || value*1 > 65535) {
	        callback(new Error('推荐使用 1024 ~ 65535 之间的端口号'))
	      } else {
	        callback()
	      }
	    }
	  }, 100)
	}
  function checkHttp(rule, value, callback) {
    if (!value) {
      return callback(new Error('请输入有效地址'))
    }
    setTimeout(() => {
      const regex = /^https?:\/\/.*$/;
      if (!regex.test(value)) {
        callback(new Error('地址格式错误'))
      } else {
        callback()
      }
    }, 100)
  }
	function checkGrpc(rule, value, callback) {
	  if (!value) {
	    return callback(new Error('请输入有效地址'))
	  }
	  setTimeout(() => {
	  	const regex = /^(?:\d{1,3}\.){3}\d{1,3}:(?:[1-9]\d{0,4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
	    if (!regex.test(value)) {
	      callback(new Error('地址格式错误'))
	    } else {
	      callback()
	    }
	  }, 100)
	}
	const _data = {
		list: [],
		masterNodes: [],
		nodeDrawer: false,
		listStatus: null,
		listLoading: false,
		uploadUrl: '/file/uploadCa',
		uploadForm: {
			code: null,
			name: null,
		},
		nodeForm: {
			visible: false,
			id: '',
			group: '1',
			platform: 'autonomy',
			mode: '0',
			title: '',
			code: '',
			master: '',
			gateway: '',
			grpc: '',
			http: '',
			net: '',
			protocol: 'notls',
			token: '',
			caFile: '',
			certFile: '',
			keyFile: '',
		},
		nodeFormRules: {
			platform: [
				{required: true, message: '不能为空', trigger: 'change'}
			],
			mode: [
				{required: true, message: '不能为空', trigger: 'change'}
			],
			group: [
				{required: true, message: '不能为空', trigger: 'change'}
			],
			master: [
				{validator: function (rule, value, callback) {
			      if (that.nodeForm.group == 0 && that.nodeForm.platform === 'edge' && !that.nodeForm.master) {
			        callback(new Error("请输入主节点"));
			      } else {
			        callback();
			      }
			    }, trigger: 'blur'}
			],
			code: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			title: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			gateway: [
				{required: true, message: '不能为空', trigger: 'blur'},
				{validator: checkHttp, trigger: 'blur'}
			],
			grpc: [
				{required: true, message: '不能为空', trigger: 'blur'},
				{validator: checkGrpc, trigger: 'blur'}
			],
			http: [
				{required: true, message: '不能为空', trigger: 'blur'},
				{validator: checkHttp, trigger: 'blur'}
			],
			net: [
				{required: true, message: '不能为空', trigger: 'blur'},
				{validator: checkHttp, trigger: 'blur'}
			],
			protocol: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			token: [
				{validator: function (rule, value, callback) {
			      if (that.nodeForm.protocol !== "notls" && !that.nodeForm.token) {
			        callback(new Error("请上传token文件"));
			      } else {
			        callback();
			      }
			    }, trigger: 'change'}
			],
			caFile:  [
				{validator: function (rule, value, callback) {
			      if (that.nodeForm.protocol !== "notls" && !that.nodeForm.caFile) {
			        callback(new Error("请上传证书"));
			      } else {
			        callback();
			      }
			    }, trigger: 'change'}
			],
			certFile:  [
				{validator: function (rule, value, callback) {
			      if (that.nodeForm.protocol !== "notls" && !that.nodeForm.certFile) {
			        callback(new Error("请上传证书"));
			      } else {
			        callback();
			      }
			    }, trigger: 'change'}
			],
			keyFile:  [
				{validator: function (rule, value, callback) {
			      if (that.nodeForm.protocol !== "notls" && !that.nodeForm.keyFile) {
			        callback(new Error("请上传公钥"));
			      } else {
			        callback();
			      }
			    }, trigger: 'change'}
			],
		},
		requiredMaster: false,
		requiredToken: false,
		nodeView: null,
		configForm: {
			visible: false,
			code: '',
			master: '',
			masterInfo: {},
			masterHostname: '',
			masterGateway: '',
			http: '',
			grpc: '',
			gateway: '',
			net: '',
			protocol: 'notls',
			token: '',
		},
		configFormRules: {
			code: [
				{required: true, message: '不能为空', trigger: 'blur'},
				{validator: checkNodeCode, trigger: 'blur'},
			],
			master: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			masterGateway: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			http: [
				{required: true, message: '不能为空', trigger: 'blur'},
				{validator: checkPort, trigger: 'blur'},
			],
			grpc: [
				{required: true, message: '不能为空', trigger: 'blur'},
				{validator: checkPort, trigger: 'blur'}
			],
			gateway: [
				{required: true, message: '不能为空', trigger: 'blur'},
				{validator: checkPort, trigger: 'blur'}
			],
			protocol: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			net: [
				{required: true, message: '不能为空', trigger: 'blur'},
				{validator: checkPort, trigger: 'blur'}
			],
		},
	}
	const _method = {
		protocolChange(val){
			if(val == 'notls'){
				this.requiredToken = false
			}else{
				this.requiredToken = true
			}
		},
		configProtocolChange(val){
			if(val == 'notls'){
				that.configForm.master = that.configForm.master.replace('https:', 'http:');
			}else{
				that.configForm.master = that.configForm.master.replace('http:', 'https:');
			}
		},
		configMasterChange(item){
			that.configForm.masterHostname = new URL(item.nodeGateway).hostname
			that.configForm.masterGateway = new URL(item.nodeGateway).port
			that.configForm.protocol = item.nodeProtocol
			that.configForm.master = item.nodeId
		},
		uploadFile(refName, objName, fileName){
			let that = this
			that.$refs["nodeForm"].validateField('code', (valid) => {
	          if(valid) {
				that.uploadForm.code = that.nodeForm.code
				that.uploadForm.name = fileName
				that.$refs[refName].submit()
			  }
        	});
		},
		uploadSuccess(response, file, fileList, objName){
			that.nodeForm[objName] = response.data.path + response.data.rename
		},
		openDetail(row) {
			this.nodeView =  row
			this.nodeDrawer = true
		},
		changeStatus(val) {
			this.listStatus = val
		},
		openForm(row) {
			this.nodeForm.visible = true
			/*if(row){
				this.nodeForm = row
				this.nodeForm.visible = true
			}*/
		},
		openRegisterForm(row) {
			this.configForm.visible = true
			this.loadMasterNodes()
		},
		loadMasterNodes() {
			let that = this
			getRequst('/node/masterList').then(function (resp) {
				that.masterNodes = resp.data
			})
		},
		delNode(nodeId){
			getRequst('/node/remove?nodeId=' + nodeId).then(function (resp) {
				if (resp.status == 0) {
					that.loadList()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		closeForm() {
			this.$refs["nodeForm"].resetFields();
			this.$refs["tokenFileUploadRef"].clearFiles(); 
			this.$refs["caFileUploadRef"].clearFiles(); 
			this.$refs["certFileUploadRef"].clearFiles(); 
			this.$refs["keyFileUploadRef"].clearFiles(); 
			this.nodeForm.visible = false
		},
		closeConfigForm() {
			this.$refs["configForm"].resetFields();
			this.configForm.visible = false
		},
		testNode() {
			let that = this
			that.$refs["nodeForm"].validate((valid) => {
				if (valid) {
					postRequst('/node/valid', that.nodeForm).then(function (resp) {
						if (resp.status == 0) {
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		saveForm() {
			let that = this
			that.$refs["nodeForm"].validate((valid) => {
				if (valid) {
					postRequst('/node/create', that.nodeForm).then(function (resp) {
						if (resp.status == 0) {
							that.loadList()
							that.nodeForm.visible = false
							that.$refs["nodeForm"].resetFields();
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		saveConfigForm() {
			let that = this
			that.$refs["configForm"].validate((valid) => {
				if (valid) {
					that.$messageBox.confirm('提交注册之后系统返回数据填充脚本，您需要复制脚本并且执行成功之后，点击绑定节点进行节点绑定并且刷新绑定情况')
				    .then(() => {
						postRequst('/node/createLite', that.configForm).then(function (resp) {
							that.configForm.token = resp.data.deployToken
							if (resp.status == 0) {
								that.$message({message: resp.msg, type: "success"});
							} else {
								that.$message({message: resp.msg, type: "error"});
							}
						})
					})
				    .catch(() => {
				      // catch error
				    })
				}
			});
		},
		checkNottls(rule, value, callback){
			
		},
		loadList() {
			let that = this
			that.listLoading = true
			getRequst('/node/list').then(function (resp) {
				that.list = resp.data
				that.listLoading = false
			})
		},
		restatus(nodeId) {
			let that = this
			let loading = that.$loading()
			getRequst('/node/restatus?nodeId=' + nodeId).then(function (resp) {
				loading.close()
				if (resp.status == 0) {
					that.loadList()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		}
	}
	function _created() {
		this.loadList()
	}
	const _watch = {
		'nodeForm.group': {
			handler(newVal) {
				this.nodeForm.platform = ''
				this.nodeForm.mode = ''
			},
			deep: true,
			immediate: false
		},
		'nodeForm.platform': {
			handler(newVal) {
				if(newVal == 'edge' && that.nodeForm.group == 0 ){
					that.requiredMaster = true
				}else{
					that.requiredMaster = false
				}
			},
			deep: true,
			immediate: false
		},
		'nodeForm.code': {
			handler(newVal) {
				let that = this
				if (!that.nodeForm.title) {
					// that.nodeForm.title = newVal
				}
			},
			deep: true,
			immediate: false
		}
	}
</script>

</html>